<template>
  <view>
    <VForm ref="vform" :formOption="formOption" @onSubmit="onSubmit">
      <template #beforehiddenLevel="{ form }">
        <uni-forms-item label="部门" required name="deptName">
          <view style="display: flex">
            <uni-easyinput type="text" disabled v-model="form.deptName" />
            <button size="mini" @click.native="openTree(form)">选择</button>
          </view>
        </uni-forms-item>
        <uni-forms-item label="隐患分类" name="hiddenType">
          <uni-data-select
            v-model="form.hiddenType"
            @change="changeHiddenType"
            :localdata="[
              { value: '安全', text: '安全' },
              { value: '设备', text: '设备' },
              { value: '工艺', text: '工艺' },
              { value: '操作', text: '操作' },
              { value: '电气', text: '电气' },
              { value: '仪表', text: '仪表' },
              { value: '消防', text: '消防' },
              { value: '总图', text: '总图' },
              { value: '其他', text: '其他' },
            ]"
          ></uni-data-select>
        </uni-forms-item>
     
      </template>
      <template #last="{ form }">
        <uni-forms-item
          label="整改责任人"
          name="rectificationUserId"
          required
          :rules="[
            {
              required: true,
              errorMessage: '字段为必填项',
            },
          ]"
        >
          <UserSelect
            :names="form.rectificationUserName"
            @change="onUserChange('rectificationUser', $event, form)"
            :limit="1"
          ></UserSelect>
        </uni-forms-item>
        <uni-forms-item
          label="复核人"
          name="reviewUserId"
          required
          :rules="[
            {
              required: true,
              errorMessage: '字段为必填项',
            },
          ]"
        >
          <UserSelect
            :names="form.reviewUserName"
            @change="onUserChange('reviewUser', $event, form)"
            :limit="1"
          ></UserSelect>
        </uni-forms-item>
        <uni-forms-item label="照片" name="files">
          <Camera v-model="files" :limit="5"> </Camera>
        </uni-forms-item>
      </template>
    </VForm>
    <view>
      <TreeDept
        v-show="showTree"
        :data="deptTree"
        :id="[]"
        :checkStrictly="true"
        @getChooseValue="getChooseDept"
        @close="closeTree"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      preventionCheckTaskId: "",
      preventionCheckTaskConfigId: "",
      isAdd: true,
    };
  },
  onLoad(payload) {
    this.preventionCheckTaskId = payload.preventionCheckTaskId;
    this.preventionCheckTaskConfigId = payload.preventionCheckTaskConfigId;
  },
};
</script>

<script setup>
import { ref, getCurrentInstance, onMounted, watch } from "vue";
import VForm from "@/components/uniForm.vue";
import formJson from "./options.json";
import { useFormJson } from "@/hooks/jsonToForm.js";
import { selectOptions } from "./consts";
import { apis as APIS } from "@/api/yhpc/yhdj.js";
import { useInputData } from "@/hooks/useInputData.js";
import Camera from "@/components/camera.vue";
import { router } from "@/router/index.js";
import UserSelect from "@/components/user-select.vue";
import { getDeptTree } from "@/api/common.js";
import TreeDept from "@/components/treeSelect/index.vue";
import { useAuthStore } from "@/store/modules/auth.js";
const authStore = useAuthStore();
const done = () => {
  router.back();
};
const { form, onSubmit } = useInputData({
  APIS: {
    ...APIS,
    add: APIS.addV3,
  },
  editDone: done,
  addDone: done,
});
const formOption = ref(
  useFormJson(formJson, {
    sort: [],
    sortable: [],
  })
);

const onUserChange = (key, e, data) => {
  if (e.list.length > 0) {
    form.value[key + "Id"] = e.ids;
    form.value[key + "Name"] = e.names;
    data[key + "Id"] = e.ids;
    data[key + "Name"] = e.names;
    e.done(form.value[key + "Name"]);
  } else {
    e.done("");
  }
};

const sonTypes = ref([]);
const changeHiddenType = (val) => {
  if (val) {
    sonTypes.value = selectOptions[val].map((i) => ({
      value: i,
      text: i,
    }));
  } else {
    sonTypes.value = [];
  }
};
// 文件
const files = ref([]);
watch(
  () => files,
  (newData) => {
    form.value.hiddenFileId = newData.value
      .map((item) => (item ? item.id : ""))
      .join(",");
  },
  {
    deep: true,
  }
);

const vform = ref();
onMounted(() => {
  const { preventionCheckTaskId, preventionCheckTaskConfigId } =
    getCurrentInstance().data;
  form.value.preventionCheckTaskId = preventionCheckTaskId;
  form.value.preventionCheckTaskConfigId = preventionCheckTaskConfigId;
  form.value.tempType = 1;
  vform.value.setFormData({
    hiddenSource: "隐患排查任务",
    hiddenCheckUser: authStore.user.nickName,
  });

  getDeptTree().then((res) => {
    deptTree.value = res.data;
  });
});
// 组织树 责任人 相关逻辑
const deptTree = ref([]);

const showTree = ref(false);
const closeTree = () => {
  showTree.value = false;
};
const deptForm = ref({});
const openTree = (form) => {
  deptForm.value = form;
  showTree.value = true;
};
const getChooseDept = (ids, item) => {
  deptForm.value.deptName = item[item.length - 1].label;
  deptForm.value.deptId = item[item.length - 1].id;
};
</script>

<style lang="scss" scoped></style>
